<template>
  <view>
    <!-- 判断是否有数据，如果没有则显示提示性文字 -->
    <view v-if="dataList.length === 0" class="no-data">暂时还没有订单数据</view>
    
    <!-- 使用v-for循环展示每个订单 -->
    <view v-else v-for="(order, index) in dataList" :key="index" class="order-item">
      <!-- 标题 -->
      <view class="title">订单详情</view>
      
      <!-- 订单号 -->
      <view class="item">
        <view class="label">订单号：</view>
        <view class="value">{{ order.order_number }}</view>
      </view>
      
      <!-- 服务名称 -->
      <view class="item">
        <view class="label">服务名称：</view>
        <view class="value">{{ order.service_name }}</view>
      </view>
      
      <!-- 宠物姓名 -->
      <view class="item">
        <view class="label">宠物姓名：</view>
        <view class="value">{{ order.pet_name }}</view>
      </view>
      
      <!-- 服务状态 -->
      <view class="item">
        <view class="label">服务状态：</view>
        <view class="value">{{ formatStatus(order.status) }}</view>
      </view>
      
      <!-- 是否为医疗订单 -->
      <view class="item">
        <view class="label">是否为医疗订单：</view>
        <view class="value">{{ order.is_medical_order ? '是' : '否' }}</view>
      </view>
      
      <!-- 完成时间 -->
      <view class="item" v-if="order.status === 1||order.status === 4">
        <view class="label">完成时间：</view>
        <view class="value">{{ order.complete_time.slice(0,10) }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import config from '@/config/config.js'; // 引入全局配置文件
  export default {
    data() {
      return {
        dataList: [], // 数据列表
        dataLoading: true, // 数据加载状态
      }
    },
    onLoad() {
		uni.showToast({
			icon:"loading"
		})
      // 在页面加载时获取用户信息
      const user_id = uni.getStorageSync('userInfo').user_id;
    
      // 根据用户信息向数据库发起请求，获取订单数据
      // 这里使用 setTimeout 模拟异步请求
      setTimeout(() => {
        uni.request({
          url: config.baseURL + `/serviceRecords/getAllDetailsByUserId/${user_id}`,
          method: 'GET',
          success: (res) => {
            this.dataList = res.data.data
          },
          fail: () => {
            uni.showToast({
              title: '请求失败，请检查网络连接',
              icon: 'none'
            });
          },
          complete: () => {
            this.dataLoading = false; // 数据加载完成，隐藏加载提示
          }
        });
      }, 1000);
    },
    methods: {
      // 格式化订单状态
      formatStatus(status) {
        switch(status) {
          case 1:
            return '完成';
          case 2:
            return '院方拒绝';
          case 3:
            return '用户取消';
          case 4:
            return '已经诊断';
          default:
            return '未知';
        }
      }
    }
  }
</script>

<style scoped>
.no-data {
  text-align: center;
  font-size: 16px;
  color: #999;
  margin-top: 20px;
}

.order-item {
  margin-bottom: 30px;
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 10px;
  padding: 20px;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
}

.value {
  flex: 1;
  margin-left: 10px;
  text-align: right;
}
</style>
